<script setup lang="ts">
import XtxSwiper from '@/components/XtxSwiper.vue'
import CustomNavbar from './components/CustomNavbar.vue'
import { ref } from 'vue'
import type { bannerItem, CategoryItem, HotItem } from '@/types/home'
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'
import CategoryPanel from '@/components/CategoryPanel.vue'
import HotPanel from '@/pages/index/components/HotPanel.vue'
import XtxGuess from "@/components/XtxGuess.vue";
import type {XtxGuessInstance} from "@/components/components";

const homeData = ref<bannerItem[]>([])
const getHomeData = async () => {
  const res = await getHomeBannerAPI()
  homeData.value = res.result
}

const categoryData = ref<CategoryItem[]>([])
const getCategoryData = async () => {
  const res = await getHomeCategoryAPI()
  categoryData.value = res.result
}

const hotData = ref<HotItem[]>([])
const getHotData = async () => {
  const res = await getHomeHotAPI()
  hotData.value = res.result
}

const guessRef = ref<XtxGuessInstance>()
const onScrolltolower = () => {
  guessRef.value?.getMore()
}
// 页面加载生命周期
onLoad(() => {
  getHomeData()
  getCategoryData()
  getHotData()
})
</script>

<template>
  <CustomNavbar />
  <scroll-view class="scroll_view" scroll-y="true" @scrolltolower="onScrolltolower()">
    <XtxSwiper :list="homeData" />
    <CategoryPanel :list="categoryData" />
    <hot-panel :list="hotData"/>
    <XtxGuess ref="guessRef" />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll_view {
  flex: 1;
}
</style>
